<!DOCTYPE html>
<html lang="en">
<head>
	<title>Nokia Mobile Web Components</title>
	<meta charset="utf-8" >
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="author" content="">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="shortcut icon" href="resources/images/favicon.ico" />
	<link rel="stylesheet" href="resources/styles/nokia.mwc-1.0.css" media="screen, handheld" />
	<script src="resources/scripts/nokia.mwc-1.0.js"></script>
	<script>
		function init() {
			// create the #top drawer component
			var main_menu = SlidingDrawer({"id":"top"});
			
			// create the #tap_me demo Collapsible component
			var options = {
				"id":"tap_me",
				"open": true
			};
			var tap_me = Collapsible(options);
		}
		addEvent(window, "load",init);
	</script>
</head>
<body>
	<header id="top" class="sliding-drawer">
		<img src="resources/images/component.png" alt="component" />
		<h1>Mobile Web Components</h1>
		<p>On <a href="https://projects.developer.nokia.com/mobile_web_components">projects.developer.nokia.com</a></p>
		<nav>
			<ul>
				<li><a href="index.html">Overview</a></li>
				<li><a href="collapsible.html">Collapsible</a></li>
				<li><a href="scrollable.html">Scrollable</a></li>
				<li><a href="pop-up-menu.html">Pop-up Menu</a></li>
				<li><a href="sliding-drawer.html">Sliding Drawer</a></li>
				<li><a href="slideshow.html">Slideshow</a></li>
				<li><a href="miscellaneous.html">Miscellaneous</a></li>
			</ul>
		</nav>
	</header>
	
	<header>
			<h2>Collapsible</h2>
			<p>A simple component enabling users to hide and reveal the contents of a content block.</p>
	</header>
	<figure>
  		<img src="resources/images/headers/flickr-atomicjeep-2655701444.jpg" />
		<figcaption>Original photo licensed under <a href="http://creativecommons.org/licenses/by/2.0/deed.en" rel="license" title="Creative Commons: Attribution 2.0 Generic (CC BY 2.0)">Creative Commons</a> by <a href="http://www.flickr.com/photos/atomicjeep/2655701444" title="in rainbow(s) umbrella">atomicjeep</a>.</figcaption>
	</figure>
	<nav id="contents">
		<h4>Contents</h4>
			<ol>
				<li><a href="#intro">Introduction</a></li>
				<li><a href="#usage">General Usage</a></li>
				<li><a href="#properties">Properties & Functions</a></li>
				<li><a href="#demo">Demo: Collapsible </a></li>
			</ol>
	</nav>
	<h3 id="intro">Introduction</h3>
	<p>The collapsible component enables users to hide and reveal the contents of selected content blocks. Hardware acceleration CSS3 transforms (instead of JavaScript) are used (if supported) to efficiently animate between the open and closed states of the component. </p>
	<h3 id="usage">General Usage</h3>
	<p>The collapsible component is based on a simple definition list element <code>&lt;dl&gt;</code>, which contains a definition title <code>&lt;dt&gt;</code> and a definition description <code>&lt;dd&gt;</code>. <strong>The content that will be revealed and concealed should be included within the <code>&lt;dd&gt;</code> element.</strong></p>
	<p>When the user presses the title <code>&lt;dt&gt;</code> element, the component toggles between the two states. A change in component state can also be triggered by calling the function <code>collapsible.toggle(state)</code> and providing an optional state parameter.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>HTML</h4>
<pre>
&lt;dl id=&quot;tap_me&quot; class=&quot;collapsible&quot;&gt;
  &lt;dt&gt;
    &lt;!-- title --&gt;
  &lt;/dt&gt;
  &lt;dd&gt;
    &lt;!-- content --&gt;
  &lt;/dd&gt;
&lt;/dl&gt;
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<p>The above code snippet illustrates the basic structure of a collapsible component.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>JavaScript</h4>
<pre>
var options = {
  "id":"tap_me",
  "open": true
 };
var tap_me = Collapsible(options);
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<p>The JavaScript above defines our component options, including the id of the component's DOM element as well as the (optional) initial toggle state of the component. The default toggle state value is &quot;closed&quot;, and can be set to &quot;open&quot; via the options object if required.</p>
	<h3 id="properties">Properties & Functions</h3>
		<table>
			<tr><td>id</td><td>#id of DOM element structure</td></tr>
			<tr><td>open</td><td> true | false</td></tr>
			<tr><td>toggle(state)</td>
			<td>toggle component, state (&quot;open&quot; | &quot;closed&quot;) parameter is optional</td></tr>
		</table>
	<h3 id="demo">Demo</h3>
	<p>Tapping (or clicking) the 'Tap Me' label below will toggle between the open and closed states.</p>
		<dl id="tap_me" class="collapsible">
			<dt><h4>Tap Me</h4></dt>
			<dd>
				<img src="resources/images/slideshow/flickr-byebyeempire-139059573.jpg" />
				<p><figcaption>Original photo licensed under <a href="http://creativecommons.org/licenses/by/2.0/deed.en" rel="license" title="Creative Commons: Attribution 2.0 Generic (CC BY 2.0)">Creative Commons</a> by <a href="http://www.flickr.com/photos/byebyeempire/139059573">Pennington</a></figcaption></p>
			</dd>
		</dl>
	<nav><a href="#top" class="top">back to top</a></nav>
	<footer>
		<nav>
			<ul>
				<li><a href="https://projects.developer.nokia.com/home/">Nokia Projects</a></li>
				<li><a href="http://developer.nokia.com/home/">Developer.nokia.com</a></li>
			</ul>
		</nav>
		<p>Components licensed Creative Commons <a href="http://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a></p>
	</footer>
</body>
</html>

